<template>
	<view class="year-month-select-box">
		<view class="year-month-select" @click="show = true">
			<img src="@/static/images/select_down.png" alt="" class="icon"></img>
			<text class="txt">{{timeOptions.value | date('yyyy年mm月')}}</text>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="timeOptions.value" :minDate="timeOptions.min"
			:maxDate="timeOptions.max" mode="year-month" confirmColor="#386FFF" @cancel="show=false"
			@confirm="yearConfirm" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				timeOptions: {
					value: 0,
					max: 0,
					min: 0
				}
			}
		},
		created() {
			this.timeOptions.value = Number(new Date())
			this.timeOptions.max = new Date().getTime()
			this.timeOptions.min = new Date('1900-01-01').getTime()
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			yearConfirm(e) {
				// console.log('e', e)
				var time = this.$u.timeFormat(e.value, 'yyyy-mm')
				this.$emit('changeTime', time)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.year-month-select {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.icon {
			display: block;
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}

		.txt {
			font-size: 22rpx;
			color: $uni-color-666;
		}
	}
</style>